<!-- 轮播图片管理模板 -->
<div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">轮播图片:</label>
    <div class="col-xs-12 col-sm-10">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <i class="fa fa-images"></i> 轮播图片设置
                    <small class="text-muted">（最多可添加5张图片）</small>
                </h4>
            </div>
            <div class="panel-body main-panel-body" style="padding:15px 20px; height: auto !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: visible; display: flex; flex-direction: column; gap: 10px; align-items: stretch;">
                <style>
                    .main-panel-body {
                        height: auto !important;
                        overflow: visible !important;
                    }
                    .slider-image-group .panel-body {
                        padding: 10px;
                    }
                    .slider-image-group .form-group {
                        margin-bottom: 10px;
                    }
                    .slider-image-group .image-preview {
                        cursor: pointer;
                        transition: transform 0.2s;
                    }
                    .slider-image-group .image-preview:hover {
                        transform: scale(1.05);
                    }
                    .slider-image-group .input-group-btn .btn {
                        border-radius: 0;
                    }
                    .slider-image-group .input-group-btn .btn:first-child {
                        border-top-right-radius: 4px;
                        border-bottom-right-radius: 4px;
                    }
                </style>
                <div id="slider-images-container" style="margin: 0;">
                    <!-- 动态生成的图片组将在这里显示 -->
                </div>

                <!-- 添加图片按钮 -->
                <div class="text-center" style="margin-top: 15px;">
                    <button type="button" id="add-image-group" class="btn btn-success">
                        <i class="fa fa-plus"></i> 添加图片
                    </button>
                    <small class="text-muted">（已添加 <span id="image-count">0</span> / 5 张图片）</small>
                </div>
            </div>
        </div>
        <!-- 隐藏字段存储JSON数据 -->
        <input type="hidden" id="c-image" name="row[{{field_name}}]" value="" />
    </div>
</div>

<!-- 引入轮播图片管理脚本 -->
<script>
require(['lunbotu'], function(LunBoTu) {
    $(document).ready(function() {
        // 初始化轮播图片管理器
        window.lunbotuManager = new LunBoTu({
            containerId: 'slider-images-container',
            inputId: 'c-image',
            addBtnId: 'add-image-group',
            countId: 'image-count',
            maxImages: 5,
            fieldName: '{{field_name}}'
        });
    });
});
</script>